@import 'src/styles/reset.scss';
@import 'src/styles/variables.scss';
@import 'src/styles/theme-dark.scss';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// HTML和body基础样式
html {
  font-size: 16px; // 设置基础字体大小
  line-height: 1.5; // 设置基础行高
  -webkit-font-smoothing: antialiased; // 字体平滑
  -moz-osx-font-smoothing: grayscale; // 字体平滑
  box-sizing: border-box;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; // 跨平台友好字体
  color: #333; // 基础文字颜色
  overflow-x: hidden; // 防止横向滚动条
  background-color: $light-bg-color !important;

  #driver-highlighted-element-stage {
    background-color: #fff !important;
  }
}

#root {
  height: 100%
}
// 标题元素样式重置
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}

// 链接样式
a {
  color: #1890ff; // 主题色链接
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #40a9ff; // 悬停状态
}

// 滚动条样式（Webkit浏览器）
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

// 响应式字体大小调整
@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

// 清除浮动
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

// 隐藏元素
.hidden {
  display: none !important;
}

// 文本省略
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@for $i from 1 through 100 {
  // 总margin
  .m-#{$i} {
    margin: #{$i}px;
  }
  //总padding
  .p-#{$i} {
    padding: #{$i}px;
  }
  // 上下margin
  .my-#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }
  .py-#{$i} {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }

  // 左右margin
  .mx-#{$i} {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
  }
  .px-#{$i} {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }

  // 上margin
  .mt-#{$i} {
    margin-top: #{$i}px;
  }
  .pt-#{$i} {
    padding-top: #{$i}px;
  }

  // 右margin
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
  .pr-#{$i} {
    padding-right: #{$i}px;
  }

  // 下margin
  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }
  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }

  // 左margin
  .ml-#{$i} {
    margin-left: #{$i}px;
  }
  .pl-#{$i} {
    padding-left: #{$i}px;
  }
}

@for $t from 1 through 100 {
  .fz-#{$t} {
    font-size: #{$t}px
  }
}

// 居中布局
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

// 定位工具类
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

// 文本对齐
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}
